<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
<meta name="renderer" content="webkit" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, minimal-ui" />
<meta name="copyright" content="ziyouziti.com" />
<link href="css/bootstrap.min.css" rel="stylesheet"/>
<link href="css/icons.css" rel="stylesheet"/>
<link href="css/core.css" rel="stylesheet"/>
<link href="css/components.css" rel="stylesheet"/>
<link href="css/bootstrap-table.min.css" rel="stylesheet"/>
<link href="css/foundation-datepicker.css" rel="stylesheet"/>
<link href="css/cc-base.css" rel="stylesheet" />
<link href="css/global.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet" />
<title>xxxxxx</title>
</head>
<body class="bgf6">
	
	<div class="main-nav">
		<div class="container">
			<ul class="nav-list clearfix">
				<li><a href="">首页</a></li>
				<li><a href="">我的EBook</a></li>
			</ul>
		</div>
	</div>
	
	<div class="top-bar">
		<div class="container">
			<div class="dflx sbt aic">
				<div class="left aic">
					<a href="" class="logo"></a>
					<span class="welcome c333 f14">欢迎访问EBook商城系统</span>
				</div>
				<div class="right f14 c333">
					<span class="dropdown">
                        <a href="" class="dropdown-toggle profile" data-toggle="dropdown" aria-expanded="false">张三 <i class="md  md-keyboard-arrow-down"></i></a>
                        <ul class="dropdown-menu">
                             <li><a href="#"><i class="ti-user m-r-5"></i> 已买到的宝贝</a></li>
                            <li><a href="#"><i class="ti-power-off m-r-5"></i> 退出</a></li>
                        </ul>
                    </span>
				</div>
			</div>
		</div>
	</div>
	
	<div class="main-body pb100">
		<div class="container pt10">
			<div class="dflx sbt">
				<div class="body-left bgff">
					<ul class="nav-list">
						<li class="active"><a href="">xxx</a></li>
						<li><a href="">xxxxxx</a></li>
						<li><a href="">xx</a></li>
						<li><a href="">xxx</a></li>
						<li><a href="">xxx</a></li>
					</ul>
				</div>
				
				<div class="body-right">
					<div class="bread-nav bgff">
						<ul class="dflx">
							
						</ul>
					</div>
					
					<div class="bgff mt10">
						<div class="wrap">
							<!--筛选条件/操作-->
							<div class="row">
								<div class="col-md-4">
									<input type="text" class="form-control" placeholder="xxx">
								</div>
								<div class="col-md-4">
									<select class="form-control c999">
										<option value='' disabled selected class='none'>xxxxx</option>  
                                        <option>1</option>
                                        <option>2</option>
                                        <option>3</option>
                                        <option>4</option>
                                        <option>5</option>
                                    </select>
								</div>
								<div class="col-md-4">
									<div class="input-group">
										<input type="text" class="form-control" placeholder="xxxx" id="datepicker">
										<span class="input-group-addon"><i class="icon-calender"></i></span>
									</div>
								</div>
								
							</div>
							
							<div class="row mt15">
								<div class="col-md-4">
									<select class="form-control c999">
										<option value='' disabled selected class='none'>xxxxx</option>  
                                        <option>1</option>
                                        <option>2</option>
                                        <option>3</option>
                                        <option>4</option>
                                        <option>5</option>
                                    </select>
								</div>
								<div class="col-md-4 col-md-offset-4 tr">
									<button type="button" class="btn btn-primary f12"> 查询 </button>
									
								</div>
							</div>
							
							<div class="mt30 dflx sbt">
								
							</div>
							
							<!--表格部分-->
							<table class="table th52 f14 table-bordered mt20 table-hover">
								<thead>
									<tr>
										<th></th>
										<th>序号</th>
										<th>xx</th>
										<th>xxx</th>
										<th>xxx</th>
										<th>xxx</th>
										<th>当前状态</th>
										<th>操作</th>
									</tr>
								</thead>
								<tbody>
									<tr>
										<th scope="row">
											<div class="checkbox checkbox-single"><input type="checkbox" value="" aria-label="Single checkbox One"><label></label></div></th>
										<td>01</td>
										<td>xxxxxx</td>
										<td>CS-2019-JTJ-0001</td>
										<td>2018-12-08</td>
										<td>xxxxxxxx</td>
										<td><i class="fa fa-circle gre"></i> 已提交</td>
										<td><a href="" class="mr10">查看</a><a href="" class="mr10">编辑</a><a href="" class="mr10">删除</a></td>
									</tr>
									
									
									
									<tr>
										<th scope="row">
											<div class="checkbox checkbox-single"><input type="checkbox" value="" aria-label="Single checkbox One"><label></label></div></th>
										<td>10</td>
										<td>xxxx</td>
										<td>CS-2019-JTJ-0001</td>
										<td>2018-12-08</td>
										<td>xxxx</td>
										<td><i class="fa fa-circle org"></i> 草稿</td>
										<td><a href="" class="mr10">查看</a><a href="" class="mr10">编辑</a><a href="" class="mr10">删除</a></td>
									</tr>
								
								</tbody>
							</table>
							
							<!--表格尾部-->
							<div class="dflx aic sbt pb20">
								<span class="f12 c999">共 400 条记录 第 1 / 80 页</span>
								<div class="dflx aic">
									<ul class="pagination pagination-split">
										<li class="disabled">
											<a href="#"><i class="fa fa-angle-left"></i></a>
										</li>
										<li>
											<a href="#">1</a>
										</li>
										<li class="active">
											<a href="#">2</a>
										</li>
										<li>
											<a href="#">3</a>
										</li>
										<li>
											<a href="#">4</a>
										</li>
										<li>
											<a href="#">5</a>
										</li>
										<li>
											<a href="#"><i class="fa fa-angle-right"></i></a>
										</li>
									</ul>
									<div class="form-inline ml10">
										<span class="page-list">
											<span class="btn-group dropup">
												<button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
													<span class="page-size">10/页</span> <span class="caret"></span>
												</button>
												<ul class="dropdown-menu" role="menu">
													<li class="active"><a href="javascript:void(0)">10/页</a></li>
													<li><a href="javascript:void(0)">25/页</a></li>
													<li><a href="javascript:void(0)">50/页</a></li>
												</ul>
											</span>
										</span>
		                            
		                            	<span class="ml10">跳至<input type="text" class="form-control ml5 mr5" value="1" style="width:50px;height:34px;">页</span>
									</div>
									
								</div>
							</div>
							
                            
                            
							
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	
<script src="js/jquery-1.10.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/foundation-datepicker.js" type="text/javascript" charset="utf-8"></script>
<script src="js/foundation-datepicker.zh-CN.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap-table.min.js"></script>
<script src="js/jquery.bs-table.js"></script>
<script type="text/javascript">
$('#datepicker').fdatepicker({
	format: 'yyyy-mm-dd',
});

$(".table input[type=checkbox]").change(function() {
	var stat = $(this).prop('checked');
	if(stat){
		$(this).parents("tr").addClass("selected");
	}else{
		$(this).parents("tr").removeClass("selected");
	}
});

</script>
</body>
</html>
